<template>
  <div>
    <el-breadcrumb class="breadcrumb page-title" separator="/">
      <el-breadcrumb-item :to="{ path: '/' }">{{$t('m.agentList_title')}}</el-breadcrumb-item>
      <el-breadcrumb-item>{{$t('m.Details')}}</el-breadcrumb-item>
    </el-breadcrumb>
    <div class="container-padding">
      <div class="img-wrap">
        <div class="block wrap-left">
          <el-carousel :autoplay="false" @change="PictureClick" class="img-box big-box" trigger="click" height="350px"
                       ref="carousel">
            <el-carousel-item v-for="(item,index) in banners" :key="index" name="index">
              <img :src="item.photoUrl">
            </el-carousel-item>
          </el-carousel>
          <el-carousel :autoplay="false" @change="PictureClick_new" class="img-box bottom-box" type="card"
                       height="100px"
                       ref="carousel_new">
            <el-carousel-item v-for="(item,index) in banners" :key="index" name="index">
              <img :src="item.photoUrl">
            </el-carousel-item>
          </el-carousel>
        </div>
        <div class="wrap-right">
          <div class="wrap-right-bottom">
            <!--<div class="wrap-right-bottom-img">-->
            <!--<img :src="developer.companyLogo" alt="">-->
            <!--</div>-->
            <div class="message">
              <p class="mes" style="margin: 0 0 60px -28px" v-if="developer.name"><img class="mes-logo company-logo"
                                                                                       :src="developer.companyLogo"
                                                                                       alt=""
                                                                                       :onerror="defaultImg"><span
                class="mes-value">{{developer.name ? developer.name : ''}}</span></p>
              <!--<p class="mes">{{developer.street ? developer.street + ',' : ''}}{{developer.township ? developer.township + ',' : ''}}{{developer.region ? developer.region : ''}}</p>-->
              <p class="mes" v-if="developer.phone"><img class="mes-logo" src="../../../static/phone.png" alt=""><span
                class="mes-value">{{developer.phone ? developer.phone : ''}}</span></p>
              <p class="mes" v-if="developer.facebookEmail"><img class="mes-logo" src="../../../static/email.png"
                                                                 alt=""><span class="mes-value">{{developer.facebookEmail ? developer.facebookEmail : ''}}</span>
              </p>
              <p class="mes" v-if="developer.googleEmail"><img class="mes-logo" src="../../../static/email.png"
                                                               alt=""><span class="mes-value">{{developer.googleEmail ? developer.googleEmail : ''}}</span>
              </p>
            </div>
          </div>
        </div>
      </div>

      <div class="line" style="margin-bottom: 15px"></div>

      <div class="developer-info">
        <div class="item" v-if="developmentMessage.burmeseTitle || developmentMessage.englishTitle">
          <span class="item-right">{{ this.$i18n.locale == 'MM' ? translateUTZaw(developmentMessage.burmeseTitle) : translateUTZaw(developmentMessage.englishTitle)}}</span>
        </div>
        <div class="item">
          <span class="item-left">{{$t('m.PropertyName')}}</span><span
          class="item-right">{{developmentMessage.developmentName}}</span>
        </div>
        <div class="item" v-if="developmentMessage.address">
          <span class="item-left">{{$t('m.StreetAdvertisement')}}</span><span
          class="item-right">{{developmentMessage.address}}</span>
        </div>
        <div class="item">
          <span class="item-left">{{$t('m.Township')}}</span><span
          class="item-right">{{getTownshipItem(developmentMessage.township)}}</span>
        </div>
        <div class="item">
          <span class="item-left">{{$t('m.Region')}}</span><span
          class="item-right">{{getRegionItem(developmentMessage.region)}}</span>
        </div>
      </div>

      <div class="price-lks">
        <span class="lks-price">{{regexNum(detailobj.mmkPrice)}}</span><span class="lks-logo">Lks</span><span class="usd-price"
                                                                                                    v-if="detailobj.usdPrice">({{regexNum(detailobj.usdPrice)}} USD) price</span>
      </div>

      <div class="room-box">
        <span class="room-box-item" v-if="detailobj.masterBedrooms"><span class="item-price">{{regexNum(detailobj.masterBedrooms)}}</span>{{$t('m.Master')}}{{$t('m.Bedroom')}}</span>
        <span class="room-box-item" v-if="detailobj.bedrooms"><span class="item-price">{{regexNum(detailobj.bedrooms)}}</span>{{$t('m.Bedroom')}}</span>
        <span class="room-box-item" v-if="detailobj.bathrooms"><span class="item-price">{{regexNum(detailobj.bathrooms)}}</span>{{$t('m.Bathroom')}}</span>
      </div>

      <div class="developer-info">
        <div class="item" v-if="detailobj.floorSize">
          <span class="item-left">{{$t('m.Floorsize')}}</span><span
          class="item-right">{{detailobj.floorSize ? regexNum(detailobj.floorSize) + ' Sqft ':''}} {{detailobj.floorLength &&  detailobj.floorWidth ? '('+regexNum(detailobj.floorLength)+ ' x ' +regexNum(detailobj.floorWidth) +')' : ''}}</span>
        </div>
        <div class="item" v-if="detailobj.landSize">
          <span class="item-left">{{$t('m.Landsize')}}</span><span
          class="item-right">{{detailobj.landSize? regexNum(detailobj.landSize) + ' Sqft ':''}}{{detailobj.landLength && detailobj.landWidth ? '('+regexNum(detailobj.landLength)+ ' x ' +regexNum(detailobj.landWidth) +')' : ''}}</span>
        </div>
        <div class="item" v-if="detailobj.transactionType == 1">
          <span class="item-left">{{$t('m.Pricesqft')}}</span><span
          class="item-right">{{regexNum(detailobj.PriceSqft) + '  Lks/sqft'}}</span>
        </div>
        <div class="item" v-if="detailobj.propertyType">
          <span class="item-left">{{$t('m.Type')}}</span><span
          class="item-right">{{getPropertyTypeItem(detailobj.propertyType)}}/{{getPropertySubTypeItem(detailobj.propertySubType)}}</span>
        </div>
        <div class="item" v-if="detailobj.transactionType">
          <span class="item-left">{{$t('m.ListingType')}}</span><span
          class="item-right">{{detailobj.transactionType == 2 ? $t('m.rent') : $t('m.sale')}}</span>
        </div>
        <div class="item" v-if="detailobj.furnishing">
          <span class="item-left">{{$t('m.Furnishing')}}</span><span
          class="item-right">{{getFurnishingTypeItem(detailobj.furnishing)}}</span>
        </div>
        <div class="item" v-if="detailobj.buildYear">
          <span class="item-left">{{$t('m.Built')}}</span><span
          class="item-right">{{detailobj.buildYear}}</span>
        </div>
        <div class="item" v-if="detailobj.floorNo">
          <span class="item-left">{{$t('m.FloorNumber')}}</span><span
          class="item-right">{{floorTranslate(detailobj.floorNo)}}</span>
        </div>
        <div class="item" v-if="detailobj.totalFloor">
          <span class="item-left">{{$t('m.TotalFloor')}}</span><span
          class="item-right">{{detailobj.totalFloor}}</span>
        </div>
        <div class="item" v-if="detailobj.facing">
          <span class="item-left">{{$t('m.Facing')}}</span><span
          class="item-right">{{getFacingTypeItem(detailobj.facing)}}</span>
        </div>
        <div class="item" v-if="detailobj.Listed">
          <span class="item-left">{{$t('m.Listed')}}</span><span
          class="item-right">{{this.dateFormat(detailobj.Listed)}}</span>
        </div>
      </div>

      <div class="line"
           v-if="PaymentTerms.isInstallment || PaymentTerms.isBankLoan || PaymentTerms.paymentTermsDescription"></div>
      <div class="price-box"
           v-if="PaymentTerms.isInstallment || PaymentTerms.isBankLoan || PaymentTerms.paymentTermsDescription">
        <div class="title">{{$t('m.PaymentTerms')}}</div>
        <div class="content">
          <span v-if="PaymentTerms.isInstallment">{{$t('m.Installment')}}</span>
          <span v-if="PaymentTerms.isBankLoan">{{$t('m.BankLoan')}}</span>
          <span v-if="PaymentTerms.paymentTermsDescription">{{PaymentTerms.paymentTermsDescription}}</span>
        </div>
      </div>

      <div class="line" v-if="indoorArr.length>0"></div>
      <div class="price-box" v-if="indoorArr.length>0">
        <div class="title">{{$t('m.IndoorFeatures')}}</div>
        <div class="content">
          <div class="icon-box">
            <span class="icon-item" v-for="item in indoorArr"><i class="el-icon-check green-icon"></i>{{getIndoorArrItem(item)}}</span>
          </div>
        </div>
      </div>

      <div class="line" v-if="outdoorArr.length>0"></div>
      <div class="price-box" v-if="outdoorArr.length>0">
        <div class="title">{{$t('m.OutdoorFeatures')}}</div>
        <div class="content">
          <div class="icon-box">
            <span class="icon-item" v-for="item in outdoorArr"><i class="el-icon-check green-icon"></i>{{getOutdoorArrItem(item)}}</span>
          </div>
        </div>
      </div>

      <div class="line" v-if="specialFeaturesTypeArr.length>0"></div>
      <div class="price-box" v-if="specialFeaturesTypeArr.length>0">
        <div class="title">{{$t('m.SpecialFeatures')}}</div>
        <div class="content">
          <div class="icon-box">
            <span class="icon-item" v-for="item in specialFeaturesTypeArr"><i class="el-icon-check green-icon"></i>{{getSpecialFeaturesTypeArrItem(item)}}</span>
          </div>
        </div>
      </div>


      <div class="line" v-if="description"></div>
      <div class="price-box" v-if="description">
        <div class="title">{{$t('m.Description')}}</div>
        <div class="content">
          <div class="icon-box">
            <span class="icon-item">{{description}}</span>
          </div>
        </div>
      </div>

      <div class="line" v-if="showMap"></div>
      <div class="price-box" v-if="showMap">
        <div class="title">{{$t('m.Location')}}</div>
        <div class="map-box">
          <div id='Map'></div>
        </div>
      </div>
      <div class="back">
        <el-button style="border: 1px solid #d8dce5!important; background: #fff!important;color: #5a5e66!important;"
                   @click="jumpToList" type="warning">{{$t('m.Back')}}
        </el-button>
        <el-button @click="jumpToEdit" type="warning">{{$t('m.Edit')}}</el-button>
      </div>
    </div>
  </div>

</template>


<script>
  import GoogleMapsLoader from 'google-maps'
  import { agentDetails } from '../../api/apiNext'

  // 英文翻译
  import propertyType from '@/json/propertyType'
  import propertySubType from '@/json/propertySubType'
  import township from '@/json/township'
  import region from '@/json/region'
  import facingTypeJson from '@/json/facingType'
  import furnishingTypeJson from '@/json/furnishingType'
  import specialFeaturesTypeJson from '@/json/specialFeaturesType'
  import outdoorFeaturesTypeJson from '@/json/outdoorFeaturesType'
  import indoorFeaturesTypeJson from '@/json/indoorFeaturesType'
  import floorJson from '@/json/floor'


  // 缅甸文翻译
  import mm_propertyType from '@/mmJson/propertyType'
  import mm_propertySubType from '@/mmJson/propertySubType'
  import mm_township from '@/mmJson/township'
  import mm_region from '@/mmJson/region'
  import mm_facingTypeJson from '@/mmJson/facingType'
  import mm_furnishingTypeJson from '@/mmJson/furnishingType'
  import mm_specialFeaturesTypeJson from '@/mmJson/specialFeaturesType'
  import mm_outdoorFeaturesTypeJson from '@/mmJson/outdoorFeaturesType'
  import mm_indoorFeaturesTypeJson from '@/mmJson/indoorFeaturesType'
  import mm_floorJson from '@/mmJson/floor'

  export default {
    name: 'Newdevs',
    data () {
      return {
        orginLang: this.$store.state.localLang,
        defaultImg: 'this.src="' + require('../../../static/company.png') + '"',
        banners: [],
        isInitMap: false,
        latlng: {lat: 202, lng: 100},
        id: '',
        // propertyTypeJson: propertyType,
        // propertySubTypeJson: propertySubType,
        // townshipJson: township,
        // regionJson: region,
        developmentMessage: {
          englishTitle: '',
          burmeseTitle: '',
          developmentName: '',
          address: '',
          township: '',
          region: '',
          propertyType: '', // 房产类型 id匹配
          propertySubType: '', // 房产类型 id匹配
          completionDate: '', // 完成时间
          construction: '', // 建筑完成情况
          listedDate: '', // 上市日期 对应后台返回字段 updateDatetime
          listingId: '' // 上市id
        },
        developer: {
          // 开发商信息
          companyLogo: '', // 公司logo
          name: '', // 开发商名称
          townshipId: null,
          regionId: null,
          phone: '', // 手机号码
          facebookEmail: '',
          googleEmail: '',
          street: '',
          township: '',
          region: ''
        },
        developmentsUnitsList: [], // 单位和价格模版 uint/price
        currencyId: '',  // 判断当前页面新增的时候是美元还是缅甸币种  1缅甸 3美元
        priceOptions1: '', // priceOptins 列表渲染
        priceOptions2: '',
        priceOptions3: '',
        agentCommission: {
          cashDownCommission: '',
          bankProcessCommission: '',
          hirePurchasCommission: ''
        },  // AgentCommission 数据
        // indoorJson: indoorFeaturesTypeJson,
        indoorArr: [],
        // outdoorJson: outdoorFeaturesTypeJson,
        outdoorArr: [],
        // specialFeaturesTypeJson: specialFeaturesTypeJson,
        specialFeaturesTypeArr: [],
        PaymentTerms: {
          isBankLoan: false,
          isInstallment: false,
          paymentTermsDescription: ''
        },
        showMap: true,
        // facingTypeJson: facingTypeJson,
        // furnishingTypeJson: furnishingTypeJson,
        detailobj: {
          mmkPrice: '',
          usdPrice: '',
          masterBedrooms: '',
          bedrooms: '',
          bathrooms: '',
          floorSize: '',
          floorWidth: '',
          floorLength: '',
          landSize: '',
          landLength: '',
          landWidth: '',
          PriceSqft: '',   // 2 rent   1sale
          propertyType: '',
          propertySubType: '',
          transactionType: '',  // 2 rent   1sale
          furnishing: '',
          buildYear: '',
          floorNo: '',
          totalFloor: '',
          facing: '', // json查找
          Listed: ''   //  时间函数处理
        },
        description: '',
        // floorJson: floorJson
      }
    },
    computed: {
      propertyTypeJson(){
        if(this.$store.state.localLang == 'MM'){
          return mm_propertyType
        }else {
          return propertyType
        }
      },
      propertySubTypeJson(){
        if(this.$store.state.localLang == 'MM'){
          return mm_propertySubType
        }else {
          return propertySubType
        }
      },
      townshipJson(){
        if(this.$store.state.localLang == 'MM'){
          return mm_township
        }else {
          return township
        }
      },
      regionJson(){
        if(this.$store.state.localLang == 'MM'){
          return mm_region
        }else {
          return region
        }
      },
      indoorJson(){
        if(this.$store.state.localLang == 'MM'){
          return mm_indoorFeaturesTypeJson
        }else {
          return indoorFeaturesTypeJson
        }
      },
      outdoorJson(){
        if(this.$store.state.localLang == 'MM'){
          return mm_outdoorFeaturesTypeJson
        }else {
          return outdoorFeaturesTypeJson
        }
      },
      specialFeaturesTypeJson(){
        if(this.$store.state.localLang == 'MM'){
          return mm_specialFeaturesTypeJson
        }else {
          return specialFeaturesTypeJson
        }
      },
      facingTypeJson(){
        if(this.$store.state.localLang == 'MM'){
          return mm_facingTypeJson
        }else {
          return facingTypeJson
        }
      },
      furnishingTypeJson(){
        if(this.$store.state.localLang == 'MM'){
          return mm_furnishingTypeJson
        }else {
          return furnishingTypeJson
        }
      },
      floorJson(){
        if(this.$store.state.localLang == 'MM'){
          return mm_floorJson
        }else {
          return floorJson
        }
      },
      getlangChange(val){
        return this.$store.state.localLang
      }
    },
    watch: {
      getlangChange(val) {
        // console.log(val, this.orginLang)
        if(val == this.orginLang){
          this.getDetail(this.id)
        }
      }
    },
    methods: {
      // 上下两个组件同步索引
      PictureClick (index) {
        this.$refs.carousel_new.setActiveItem(index)
      },
      PictureClick_new (index) {
        this.$refs.carousel.setActiveItem(index)
      },
      geolocate () {
        if (navigator.geolocation) {
          navigator.geolocation.getCurrentPosition(function (position) {
            var geolocation = {
              lat: position.coords.latitude,
              lng: position.coords.longitude
            }
            var circle = new window.mapsObj.googleObj.maps.Circle({
              center: geolocation,
              radius: position.coords.accuracy
            })
            window.mapsObj.autocomplete.setBounds(circle.getBounds())
          })
        }
      },
      initMap (latlng) {
        this.isInitMap = true
        /* 初始化地图 */
        let map = new window.mapsObj.googleObj.maps.Map(document.getElementById('Map'), {
          center: latlng,
          scrollwheel: true,
          zoom: 11
        })
        this.latlng.lat = latlng.lat
        this.latlng.lng = latlng.lng
        /* 设置标记 */
        let marker = new window.mapsObj.googleObj.maps.Marker({
          map: map,
          draggable: true,
          animation: window.mapsObj.googleObj.maps.Animation.DROP,
          position: latlng
        })
        /* 拖动marker设置经纬度坐标 */
        window.mapsObj.googleObj.maps.event.addListener(marker, 'dragend', function (MouseEvent) {
          map.setCenter(MouseEvent.latLng)
          var lat = MouseEvent.latLng.lat()
          var lng = MouseEvent.latLng.lng()
          this.latlng.lat = lat
          this.latlng.lng = lng
        })
      },
      // 时间格式化
      dateFormat (value, justMonth) {
        var date = new Date(value)
        var Y = date.getFullYear()
        var m = date.getMonth() + 1
        var d = date.getDate()
        var H = date.getHours()
        var i = date.getMinutes()
        var s = date.getSeconds()
        if (m < 10) {
          m = '0' + m
        }
        if (d < 10) {
          d = '0' + d
        }
        if (H < 10) {
          H = '0' + H
        }
        if (i < 10) {
          i = '0' + i
        }
        if (s < 10) {
          s = '0' + s
        }
        var t
        if (justMonth) {
          t = m + '-' + Y
        } else {
          t = d + '-' + m + '-' + Y
        }
        return t
      },
      // 当前的状态 uints
      onStatus (value) {
        if (value === 1) {
          return 'For sale'
        } else if (value === 2) {
          return 'Sold out'
        } else if (value === 3) {
          return 'For rent'
        } else if (value === 4) {
          return 'Rented out'
        }
      },
      // 跳转到编辑
      jumpToEdit () {
        this.$router.push({
          path: '/newAgent',
          query: {
            id: this.id
          }
        })
      },
      // 跳转到列表
      jumpToList () {
        this.$router.push({
          path: '/agentList'
        })
      },
      floorTranslate (floor) {
        let str = ''
        this.floorJson.forEach((item) => {
          if (item.value == floor) {
            str = item.text || ''
          }
        })
        return str
      },
      regexNum (v,len,split) {
        split = split || ',', len = Math.abs((+len) % 20 || 2)
        v = parseFloat((v + '').replace(/[^\d\.-]/g, '')).toFixed(len) + ''
        var price =  v.replace(/\d+/, function (v) {
            var lit = v.length % 3 == 0
            var index = lit ? v.length - 3 : -1
            return v.split('').reverse().join('').replace(/\d{3}/g, function (k, l) {
              return k + ((l == index && lit) ? '' : split)
            }).split('').reverse().join('')
          }
        )
        if(price.match(".00")){
          return price.replace('.00',"")
        }else {
          return price
        }
      },
      getDetail(id){
        agentDetails(id).then((res) => {
          if (res.data.errorID === 100004) {
            this.showToast(res.data.errorID)
            this.$router.push('/login')
            return
          }
          let data = res.data.object.transactionManagerDetailModel
          // 图片显示处理
          this.banners = data.photoList

          // 商品主图放到首位
          this.banners.sort((a, b) => {
            return a['orderNumber'] - b['orderNumber']
          })

          // 如果没有图片的话展示默认图片
          if (this.banners.length == 0) {
            this.banners = [{photoUrl: '../static/default.png'}]
          }
          // 名称处理
          this.developmentMessage.burmeseTitle = data.burmeseTitle || ''
          this.developmentMessage.englishTitle = data.englishTitle || ''
          this.developmentMessage.developmentName = this.translateUTZaw(data.propertyName) || ''
          // 地址处理
          this.developmentMessage.township = data.townshipId
          this.developmentMessage.region = data.regionId
          this.developmentMessage.address = this.translateUTZaw(data.street)

          // 开发商字段部分取值
          let datas = res.data.object.transactionContactResp
          // 公司logo
          this.developer.companyLogo = datas.photo || ''
          // 开发商名称
          this.developer.name = this.translateUTZaw(datas.name) || ''

          // 开发商公司地址
          this.developer.street = this.translateUTZaw(datas.street) || ''
          this.developer.township = data.townshipId
          this.developer.region = data.regionId
          // 开发商手机号
          this.developer.phone = datas.phone || ''
          // 开发商邮箱
          this.developer.googleEmail = datas.email || ''

          // detailobj 字段处理 大部分
          this.detailobj.mmkPrice = data.mmkPrice || '';
          this.detailobj.usdPrice = data.usdPrice || '';
          this.detailobj.masterBedrooms = data.masterBedrooms || ''
          this.detailobj.bedrooms = data.bedrooms || ''
          this.detailobj.bathrooms = data.bathrooms || ''
          this.detailobj.floorSize = data.floorSize || ''
          this.detailobj.floorWidth = data.floorWidth || ''
          this.detailobj.floorLength = data.floorLength || ''
          this.detailobj.landSize = data.landSize || ''
          this.detailobj.landWidth = data.landWidth || ''
          this.detailobj.landLength = data.landLength || ''
          this.detailobj.PriceSqft = data.sqft  || ''  // 2 rent   1sale
          if(data.sqft == 0){
            this.detailobj.PriceSqft = 0
          }
          // 房产种类
          this.detailobj.propertyType = data.propertyTypeId
          this.detailobj.propertySubType = data.propertySubTypeId

          this.detailobj.transactionType = data.transactionTypeId || '',  // 1 rent   2sale
            //  装饰
            this.detailobj.furnishing = data.furnishingId

          this.detailobj.buildYear = data.buildYear || '',
            this.detailobj.floorNo = data.floorNo || '',
            this.detailobj.totalFloor = data.totalFloor || '',

            // 朝向
            this.detailobj.facing = data.facingId
          this.detailobj.Listed = data.listed || ''  //  时间函数处理

          // Indoor Features
          this.indoorArr = data.indoorFeatures

          // outdoor Features
          this.outdoorArr = data.outdoorFeatures

          // specialFeatures
          this.specialFeaturesTypeArr = data.specialFeatures

          // description
          this.description = this.translateUTZaw(data.description) || ''

          // 地图渲染
          let latlng = {
            lat: '',
            lng: ''
          }
          latlng.lat = data.latitude
          latlng.lng = data.longitude

          if (data.latitude) {
            this.showMap = true
            setTimeout(() => {
              this.initMap(latlng)
            }, 1500)
          } else {
            this.showMap = false
          }
        })
          .catch((error) => {
            this.showToast(error.errorID)
          })
      },
      translateUTZaw(str){
        if (!str) return '';
        return this.$translateLang(str, 'unicodeTozawgyi')
      },
      getTownshipItem (it) {
        let str = ''
        this.townshipJson.forEach((item) => {
          if (item.value == it) {
            str = item.text || ''
          }
        })
        return str
      },
      getRegionItem (it) {
        let str = ''
        this.regionJson.forEach((item) => {
          if (item.value == it) {
            str = item.text || ''
          }
        })
        return str
      },
      getPropertyTypeItem (it) {
        let str = ''
        this.propertyTypeJson.forEach((item) => {
          if (item.value == it) {
            str = item.text || ''
          }
        })
        return str
      },
      getPropertySubTypeItem (it) {
        let str = ''
        this.propertySubTypeJson.forEach((item) => {
          if (item.value == it) {
            str = item.text || ''
          }
        })
        return str
      },
      getIndoorArrItem (it) {
        let str = ''
        this.indoorJson.forEach((item) => {
          if (item.value == it) {
            str = item.text || ''
          }
        })
        return str
      },
      getOutdoorArrItem (it) {
        let str = ''
        this.outdoorJson.forEach((item) => {
          if (item.value == it) {
            str = item.text || ''
          }
        })
        return str
      },
      getSpecialFeaturesTypeArrItem (it) {
        let str = ''
        this.specialFeaturesTypeJson.forEach((item) => {
          if (item.value == it) {
            str = item.text || ''
          }
        })
        return str
      },
      getFacingTypeItem (it) {
        let str = ''
        this.facingTypeJson.forEach((item) => {
          if (item.value == it) {
            str = item.text || ''
          }
        })
        return str
      },
      getFurnishingTypeItem (it) {
        let str = ''
        this.furnishingTypeJson.forEach((item) => {
          if (item.value == it) {
            str = item.text || ''
          }
        })
        return str
      },
    },
    mounted () {
      window.scrollTo(0, 0)
      /* Google Map Init */
      GoogleMapsLoader.KEY = 'AIzaSyD6fBhKRpK6KPw8pxwQAQDI3AyzViGIUOY'
      GoogleMapsLoader.VERSION = '3.14'
      GoogleMapsLoader.LIBRARIES = ['geometry', 'places']
      GoogleMapsLoader.load(function (google) {
        let geocoder = new google.maps.Geocoder()
        let googleObj = google
        let mapsObj = {autocomplete: '', geocoder: geocoder, googleObj: googleObj}
        window.mapsObj = mapsObj
      })

      // 页面跳转进来获取参数
      this.id = this.$route.query.id

      // 调用接口获取详情页面的数据
      this.getDetail(this.id)
    }
  }
</script>

<style>
  .el-carousel__item h3 {
    color: #475669;
    font-size: 14px;
    opacity: 0.75;
    line-height: 150px;
    margin: 0;
  }

  .el-carousel__item:nth-child(2n) {
    background-color: #99a9bf;
  }

  .el-carousel__item:nth-child(2n+1) {
    background-color: #d3dce6;
  }

  .img-box {
    width: 550px;
  }

  .img-box img {
    width: 100%;
    height: 100%;
  }

  .breadcrumb {
    margin-bottom: 20px;
  }

  .bottom-box {
    padding-top: 5px;
  }

  .bottom-box img {
    width: 100%;
    height: 100%;
  }

  .img-wrap {
    height: 480px;
    overflow: hidden;
  }

  .wrap-left {
    width: 550px;
    float: left;
  }

  .wrap-right {
    margin-left: 550px;
  }

  .wrap-right-top {
    margin: 0 15px;
    height: 270px;
    border-bottom: 1px solid #d4d3d3;
  }

  .item {
    height: 34px;
    line-height: 34px;
    font-size: 16px;
  }

  .item-left {
    width: 224px;
    display: inline-block;
    color: #83888f;
  }

  .item-right {
    color: #0b0b0b;
  }

  .wrap-right-bottom {
    overflow: hidden;
  }

  .wrap-right-bottom-img {
    width: 130px;
    height: 130px;
    overflow: hidden;
    margin: 30px 30px 30px 20px;
    float: left;
    border-radius: 50%;
    overflow: hidden;
  }

  .wrap-right-bottom-img img {
    width: 100%;
    height: 100%;
  }

  .message {
    margin-left: 80px;
    margin-top: 70px;
  }

  .line {
    padding: 10px;
    border-bottom: 1px solid #d4d3d3;
  }

  .price-box {
    padding: 20px 0;
  }

  .green-icon {
    color: #0fcb75;
    margin-right: 3px;
  }

  #Map {
    width: 500px;
    height: 400px;
    line-height: 400px;
    color: #aeaeae;
    background: #fff;
  }

  .units {
    overflow: hidden;
    height: 280px;
    margin-top: 20px;
  }

  .img-left {
    width: 360px;
    height: 270px;
    float: left;
  }

  .img-left img {
    width: 100%;
    height: 100%;
  }

  .title {
    padding: 10px 0;
    font-size: 16px;
    color: #ef9f02;
    font-weight: bold;
  }

  .img-content {
    padding-top: 10px;
    margin-left: 370px;
    height: 200px;
    font-size: 16px;
    line-height: 1.5;
  }

  .price-currency {
    color: red;
  }

  .uintTitle {
    margin: 0 10px;
    color: #343333;
  }

  .icon-item {
    margin: 0 5px;
  }

  .map-box {
    width: 50%;
    height: 400px;
  }

  .back {
    padding: 40px;
    text-align: center;
    position: absolute;
    top: 32px;
    right: 100px;
  }

  .edit {
    position: fixed;
    top: 130px;
    right: 50px;
  }

  .content {
    font-size: 16px;
  }

  .price-option-title {
    color: #ffa600;
    margin-right: 10px;
  }

  .page-title {
    padding: 20px 40px;
    border-bottom: 1px solid #e6e6e6;
    font-size: 20px;
  }

  .container-padding {
    padding: 0 40px;
  }

  .mes-logo {
    display: inline-block;
    vertical-align: middle;
  }

  .mes-value {
    margin-left: 15px;
  }

  .mes {
    height: 52px;
  }

  .company-logo {
    width: 80px;
    height: 80px;
    border-radius: 50%;
    overflow: hidden;
  }

  .price-lks {
    font-size: 28px;
    margin: 15px 0;
    color: #fc0d1c;
  }

  .lks-logo {
    font-size: 16px;
    margin: 0 10px 0 5px;
  }

  .usd-price {
    font-size: 16px;
    color: #83888f;
  }

  .room-box {
    margin-bottom: 10px;
    font-size: 16px;
  }

  .room-box-item {
    margin-right: 5px;
  }

  .item-price {
    color: #fc0d1c;
    margin-right: 5px;
  }
</style>
